<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?php
$style = getStyle();
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link href="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/stylesheet.css" rel="stylesheet" type="text/css">
		<link href="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/stylesheet_slide_show.css" rel="stylesheet" type="text/css">
			<link rel="stylesheet" href="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/style.css" type="text/css" media="screen" charset="utf-8">
				<script src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/SpryTabbedPanels.js" type="text/javascript"></script>
				<script src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery-1.4.2.min.js" type="text/javascript"></script>
				<script src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery-flashy-slideshow-1.1.0.js" type="text/javascript"></script>
				<style type="text/css">
<!--
body {
	margin-left: 0px;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
}
-->
</style>

				<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/sample.css">
					<script type="text/javascript" src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/popup-window.js"></script>
					<script type="text/javascript" src="<?php echo base_url(); ?>js/calendar/WdatePicker.js"></script>

</head>
<body>
	<div class="sample_popup" id="popup" style="display: none; left: 424.5px; position: absolute; top: 268px;">

		<div class="menu_form_header" id="popup_drag">
			<img class="menu_form_exit" id="popup_exit" src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/form_exit.png" alt="close">
		
		</div>

		<div class="menu_form_body">
			<img src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/banner.jpg" alt="Popup">
		
		</div>
	</div>

	<div class="main_wrapper_container">
		<div class="inner_page_container_main">
			<div class="header_box_container">
				<div class="logo_box">
					<a href="<?php echo base_url(); ?>"><img src="<?php echo base_url(); ?>uploads/logo.jpg" width="274" height="70" alt="Hair Salon" border="0">
					
					</a>
				</div>
				<div class="left_header_box_main">
					<div class="social_icon_main_box">

						<div class="login_button_signup_button">
							<a href="<?php echo base_url();?>booking/logout">Logout</a>
						</div>

					</div>
				</div>

			</div>
		</div>

		<link type="text/css" rel="stylesheet" href="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/registration_css.css">
			<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery.ketchup.css">
				<script type="text/javascript" src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery.min.js"></script>
				<script type="text/javascript" src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery.ketchup.js"></script>
				<script type="text/javascript" src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery.ketchup.messages.js"></script>
				<script type="text/javascript" src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/jquery.ketchup.validations.basic.js"></script>
				<script type="text/javascript">
	$(document).ready(function() {
  $('#formContainersign').ketchup();
});
  	
   $.getJSON("<?php echo base_url(); ?>booking/getServers",{param:Math.random()},function(data){
		var $s= $("#serverid"); 
		var dt = data.results;
		$s.append($("<option/>").attr("value","").text(""));
		for(var i = 0; i < dt.length; i++){ 
			$s.append($("<option/>").attr("value",dt[i].serverid).text(dt[i].serverna));  
		} 

	 //$("#serveridds").text("abcdefg"); 		
	}); 
   $.getJSON("<?php echo base_url(); ?>booking/getInfo/<?php echo $email;?>",{param:Math.random()},function(data){
		var dt = data.results;
		$("#custna").val(dt[0].custna);
		$("#custid").val(dt[0].custid);
		$("#phone").val(dt[0].phone); 
	}); 
    
			
</script>
				<title>booking</title>
				<div class="main_wrapper_container_about_us">
					<div class="inner_page_container_main">
						<div class="signup_container">
							<div class="signup_right">
								<form id="formContainersign" name="signup" method="post" action="<?php echo base_url(); ?>/booking/doBook">
									<div class="right_toppart">
										<div class="rt_bt_top1">
											<div class="rt_tophead">
												<div class="create_account_heading123">
													<IMG src="<?php echo base_url(); ?>images_booking/<?php echo $style;?>/TitleAppointment.jpg" width="330" height="60" alt="register_heading">
												
												</div>
											</div>
											<div class="rt_topmark">
												<span class="rt_please"></span>
											</div>
											<div class="rt_topmark">
												<span class="rt_please">Please Note :</span>&nbsp;&nbsp; <span class="rt_field">Fields marked with <span class="star">*</span> are required.</span>
											</div>
											<div class="form_cont">
												<div class="rowContainer">
													<label>Hair Services<span class="star">*</span> </label> <select name="serverid" id="serverid" onchange="serverchange()"></select>
													<div style="color: red; display: inline">
														<span id="serveridds"></span>
													</div>

												</div>
												<div class="rowContainer">
													<label> Designer <span class="star">*</span> </label> <select name="employeid" id="employeid" onchange="employeidchange()"></select>
													<div style="color: red; display: inline">
														<span id="employeidds"></span>
													</div>


												</div>

												<div class="rowContainer">
													<table>
														<tr>
															<td><label>Date <span class="star">*</span> </label></td>
															<td><input name="bookday" id="bookday" type="text" value="" />
																<div style="color: red; display: inline">
																	<span id="bookdayds"></span>
																</div>
															</td>
														</tr>
														<tr>
															<td></td>
															<td>
																<div style="color: red">
																	<span id="bookdayds1"></span>
																</div>
															</td>
														</tr>
													</table>
												</div>

												<div class="rowContainer">
													<label>Time <span class="star">*</span> </label>
													<!--  <input name="booktime" id="booktime" type="text" value="HH:mm" onchange="booktimechange()"/>-->
													<select name="booktime" id="booktime" onchange="booktimechange()">
														<option value="00:00"></option>
														<option value="06:00">06:00</option>
														<option value="06:30">06:30</option>
														<option value="07:00">07:00</option>
														<option value="07:30">07:30</option>
														<option value="08:00">08:00</option>
														<option value="08:30">08:30</option>
														<option value="09:00">09:00</option>
														<option value="09:30">09:30</option>
														<option value="10:00">10:00</option>
														<option value="10:30">10:30</option>
														<option value="11:00">11:00</option>
														<option value="11:30">11:30</option>
														<option value="12:00">12:00</option>
														<option value="12:30">12:30</option>
														<option value="13:00">13:00</option>
														<option value="13:30">13:30</option>
														<option value="14:00">14:00</option>
														<option value="14:30">14:30</option>
														<option value="15:00">15:00</option>
														<option value="15:30">15:30</option>
														<option value="16:00">16:00</option>
														<option value="16:30">16:30</option>
														<option value="17:00">17:00</option>
														<option value="17:30">17:30</option>
														<option value="18:00">18:00</option>
														<option value="18:30">18:30</option>
														<option value="19:00">19:00</option>
														<option value="19:30">19:30</option>
														<option value="20:00">20:00</option>
														<option value="20:30">20:30</option>
														<option value="21:00">21:00</option>
														<option value="21:30">21:30</option>
														<option value="22:00">22:00</option>
														<option value="22:30">22:30</option>
														<option value="23:00">23:00</option>
														<option value="23:30">23:30</option>
													</select>
													<div style="color: red; display: inline">
														<span id="booktimeds"></span>
													</div>
												</div>


												<div class="rowContainer">
													<label>Full Name<span class="star">*</span> </label> <input name="custna" id="custna" type="text" value="" /> <input name="custid" id="custid" type="hidden" value="" />

													<div class="ketchup-error-container" style="left: 664px; top: 302px;">
														<ol></ol>
														<span></span>
													</div>

												</div>
												<div class="rowContainer">
													<label> Phone <span class="star">*</span> </label> <input name="phone" id="phone" class="txt_rtbox validate(required)" autocomplete="off" type="text" value=""><div class="ketchup-error-container" style="left: 664px; top: 408px;">
															<ol></ol>
															<span></span>
														</div>
												
												</div>

												<div class="but_sub">
													<input class="buttonbg" name="signup" value="Make an appointment" type="button" onClick="checkBooking();">
												
												</div>
											</div>
										</div>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>


				<div class="footer_main_123_box">
					<div class="footer_menu123">
						<div class="footer_right_side_right">© 2011 ***.COM. All Rights Reserved.</div>
					</div>
				</div>
	
	</div>
</body>
</html>
<SCRIPT type=text/javascript>   
	//var today = new Date(); 
	//$("#bookday").val((today.getMonth()+1)+'/'+today.getDate()+'/'+today.getFullYear()); 
	
	if(navigator.userAgent.indexOf("MSIE")>=0) {   
		document.getElementById("bookday").attachEvent('onpropertychange',function(o){
			bookdaychange();
		});  
   	}
	if(navigator.userAgent.indexOf("Firefox")>=0){
		document.getElementById("bookday").addEventListener('input',function(o){
			bookdaychange();
		});  
	}
	function serverchange(){
		$.getJSON("<?php echo base_url(); ?>booking/getEmploye/"+$("#serverid").val(),{param:Math.random()},function(data){
			var $em= $("#employeid"); 
			$em.empty();
			
			var dt = data.results;
			$em.append($("<option/>").attr("value","").text(""));
			for(var i = 0; i < dt.length; i++){ 
				$em.append($("<option/>").attr("value",dt[i].employeid).text(dt[i].employena));  
			}  		
		}); 
	}
	
    function checkBooking()
    {  
        if($("#employeid").val()==""){
        	alert("please choose Desiger");
        	return;
        }    	
    	if($("#bookday").val()==""){
        	alert("please choose Date");
        	return;
        }
        if($("#booktime").val()=="HH:mm"){
        	alert("please input Time");
        	return;
        }
        
		$url = "<?php echo base_url(); ?>booking/checkPostBook/"
			    +$("#bookday").val().replace(/\//g,"-")+"_"
			    +$("#employeid").val()+"_"
				+$("#booktime").val().replace(":","a")+"_"
				+$("#serverid").val();		
		
    	$.getJSON($url,{param:Math.random()},function(data){
    		var msg = data.msg;
    		if(msg!="")
    			alert(msg);
    		else
        		document.forms[0].submit();
    	}); 
    }

    var msg="";
    function employeidchange(){
    	if($("#employeid").val()!=""){
	    	$("#employeidds").text("");
	    	$url = "<?php echo base_url();?>booking/getWorkingDayAjax/" 
				+$("#employeid").val();		 
			$.getJSON($url,{param:Math.random()},function(data){
				msg = data.msg;
				if(msg!=""){
					//$("#employeidds").text(msg);  
					document.getElementById("bookday").onclick=function(){						
						eval('WdatePicker({disabledDays:['+msg+']})');
					};  
				}
			}); 
    	}
    }

    function bookdaychange(){        
        if($("#bookday").val()!=""){
        	if($("#employeid").val()==""){
                alert("please choose Desiger");
           		return;
            }
            
	    	$("#bookdayds").text("");
	     
	    	$url = "<?php echo base_url();?>booking/checkBookDayAjax/"
				+$("#bookday").val().replace(/\//g,"-")+"_"+$("#employeid").val();	
	    	 
			$.getJSON($url,{param:Math.random()},function(data){
				var msg = data.msg; //workingtime
				var msg1 = data.msg1;//bookedtime
				if(msg!="")
				{ 
					$("#bookdayds").text(msg);
					$("#bookdayds1").text(msg1); 
				}
			}); 
        }
    }

    
    function booktimechange(){
    	if($("#booktime").val().indexOf(":")<0){
            alert("please input the accurate format of your time");
       		return;
        } 
    	if($("#booktime").val()!="HH:mm"){ 
	        if($("#employeid").val()==""){
	            alert("please choose Desiger");
	       		return;
	        }
	    	$("#booktimeds").text("");
	    	$url = "<?php echo base_url();?>booking/checkBookTimeAjax/"+$("#bookday").val().replace(/\//g,"-")+"_"+$("#employeid").val()+"_"+$("#booktime").val().replace(":","a")+"_"+$("#serverid").val();	
			$.getJSON($url,{param:Math.random()},function(data){
				var msg = data.msg; 
				if(msg!="")
					$("#booktimeds").text(msg);  
			}); 
    	}
    	else
    		alert("please input Time");
    }
    
  </SCRIPT>
<?php if(isset($resultMsg)) echo $resultMsg;?>
